<template>
  <div>
    <el-upload ref="uploadbtn"
               v-bind="uploadSetting"
               :on-success="handleUploadSuccess"
               :on-exceed="handleExceed"
               v-show="!view">
      <el-button type="primary" size="small" icon="el-icon-upload2">点击选择文件</el-button>
    </el-upload>

    <el-table class="form__inner_table"
              ref="list"
              border stripe
              :data="list || []"
              height="200"
              v-show="list.length>0"
              @selection-change="handleImportSelect">
      <el-table-column type="selection" width="55" v-if="!view"></el-table-column>
      <el-table-column v-for="(col, index) in cols" :key="index" :label="col.label" :prop="col.prop"></el-table-column>
    </el-table>
  </div>
</template>

<script>
  //  import ajax from '@/utils/ajax'
  import {FILE_IMPORT_PATH} from '@/config'

  export default {
    name: 'XdhFormImport',
    props: {
      view: {
        type: Boolean
      },
      load: {
        type: Function,
        default: null
      },
      uploadProps: {
        type: Object
      },
      item: {
        type: Object
      }
    },
    data() {
      return {
        list: [],
        cols: [],
        excelId: null
      }
    },
    computed: {
      uploadSetting() {
        return Object.assign({}, this.uploadProps, {
          action: FILE_IMPORT_PATH,
          accept: '.xlsx, .xls',
          limit: 1,
          showFileList: false
        })
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      loadData() {
        this.load().then(res => {
          this.cols = res.list.cols
          this.list = res.list.list
          this.$nextTick(() => {
            this.list.forEach(row => {
              this.$refs.list.toggleRowSelection(row);
            })
          })
        }).catch(() => {
        })
      },
      /**
       * 文件上传成功时的钩子
       */
      handleUploadSuccess(res, file, fileList) {
        if (Number.parseInt(res.code) === 0) {
          this.cols = res.data.cols
          this.list = res.data.list
          this.excelId = res.data.excelId
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          this.$refs.uploadbtn.clearFiles()
        }
      },
      handleExceed() {
        const handler = function (files, fileList) {
          this.$message.warning(`当前限制选择 ${this.item.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        }
        return handler.bind(this)
      },
      handleImportSelect() {
        this.handleSelection().then(({excelId, list}) => {
          this.$emit('on-select', {excelId, list})
        }).catch(excelId => {
          this.$emit('on-select', {excelId: ''})
        })
      },
      handleSelection() {
        const selection = this.$refs.list.selection;
        if (selection.length > 0) {
          return Promise.resolve({
            excelId: this.excelId,
            list: selection
          });
        } else {
          return Promise.reject(selection);
        }
      }
    }
  }
</script>
